<template>
  <div class="hd-server-bar">
    <el-date-picker
      v-model="dateValue"
      class="el-date-picker"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      format="yyyy-MM-dd HH:mm"
      @change="handleDateChange"
      @blur="handleDateBlur"
    />
  </div>
</template>

<script>

let setIntRequest = null
import { mapGetters } from 'vuex'
const dayjs = require('dayjs')
export default {
  name: 'DatePicker',
  data() {
    return {
      value: '',
      selectData: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate && minDate.getTime()
          if (maxDate) {
            // 解除限制
            this.selectData = ''
          }
        },
        disabledDate: time => {
          const start = new Date()
          // const end = new Date()
          const selectData = this.selectData
          const diffTimeStamp = 3600 * 1000 * 24 * 2
          if (selectData) {
            /* 选择的日期 与 当前日期 小于3天*/
            return time.getTime() > (selectData + diffTimeStamp > start.getTime() ? start.getTime() : selectData + diffTimeStamp) ||
              time.getTime() < selectData - diffTimeStamp
          } else {
            return time.getTime() > start.getTime()
          }
        },
        shortcuts: [{
          text: '最近一小时',
          onClick(picker) {
            const start = new Date()
            const end = new Date()

            start.setSeconds(0)
            end.setSeconds(0)

            start.setTime(start.getTime() - 3600 * 1000)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '三小时',
          onClick(picker) {
            const start = new Date()
            const end = new Date()

            start.setSeconds(0)
            end.setSeconds(0)

            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '半天',
          onClick(picker) {
            const start = new Date()
            const end = new Date()

            start.setSeconds(0)
            end.setSeconds(0)

            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '一天',
          onClick(picker) {
            const start = new Date()
            const end = new Date()

            start.setSeconds(0)
            end.setSeconds(0)

            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '三天',
          onClick(picker) {
            const start = new Date()
            const end = new Date()

            start.setSeconds(0)
            end.setSeconds(0)

            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dateValue: ''
    }
  },
  computed: {
    ...mapGetters([
    ])
  },
  watch: {
    '$route.path': {
      handler: function(path) {
        // 每次进来清空上一次状态
        this.clearIntervalFn()
      },
      immediate: true
    }
  },
  mounted() {
    this.initDateTimePicker()
  },
  beforeDestroy() {
    this.clearIntervalFn()
  },
  methods: {
    initDateTimePicker() {
      const now = dayjs().format('YYYY-MM-DD HH:mm')
      const getTime = () => {
        return parseInt(new Date(now).getTime())
      }
      this.dateValue = [getTime() - 3 * 3600 * 1000, getTime()] // 最近3小时
    },
    // 日期
    handleDateChange(data) {
      this.clearIntervalFn()
      this.$store.dispatch('datepicker/UPDATEDATES', data)

      // 发送手动勾选时间通知
      this.$bus.$emit('global-datetime-pick', data)
    },
    handleDateBlur() {
      this.selectData = ''
    },
    clearIntervalFn() {
      setIntRequest && clearInterval(setIntRequest)
      setIntRequest = null // 内存回收
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.hd-server-bar {
  height: 100%;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 5px;
  .s-select {
    margin-right: 5px;
  }
}
</style>
<style>
.el-time-panel {
  left: auto !important;
  right: 0;
}
</style>
